<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贾静文</title>
<style type="text/css">
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../作业/images/背景图片.jpg'); 
    background-size: cover; 
    background-position: center; 
    opacity: 0.6; 
    z-index: -1; 
}
.content {
    position: relative; 
    z-index: 1; 
    padding: 20px; 
    color: #fff; 
    text-align: center; }
.responsive-img {
	max-width: 100%;
	height: auto;
}
.dg2,.dg3{display: inline-block;}
.dg1{
    width: 100%; /* 宽度占满整个页面 */
    height: 10vh;
    margin:50px auto;
    background-color: #6c83b7;
    padding-left:20px;
    border-bottom: 3px solid #000;
    /*font-size: 40px;
    font-weight: bold;
    text-align: center;*/
    span{
        display: inline-block;
        width:80px;
        height:45px;
        border-bottom: 3px solid #1ba2c7;
    }
}
.dg2{
    width:220px;
    height:50px;
    background: linear-gradient(to right, rgb(91, 203, 240) 20%, rgb(21, 100, 189) 80%);
    box-shadow: color(srgb rgb(255, 255, 255));
}
.dg3{
    width:220px;
    height:50px;
    border-style:solid;
    background-color: #f0f0f0;
    box-shadow: 10px 10px 5px rgba(65, 64, 56, 0.5);
}
.d1,.d2,.d3,span{
    width:200px;
    height:50px;
    background:rgb(248, 239, 110);
    margin:10px;
    display: block;
}
.s1{
    width:200px;
    height:50px;
    background:rgb(248, 239, 110);
    display: inline-block;
}
.one{background:url(images/1.png) no-repeat;}
.two{background:url(images/2.png) no-repeat;}
.three{background:url(images/3.png) no-repeat;}
.four{background:url(images/4.png) no-repeat;}
.five{background:url(images/5.png) no-repeat;}
.six{background:url(images/6.png) no-repeat;}  
</style>
</head>
<boyd>
<a href="https://www.baidu.com/" target="_self">百度</a>
<a href="https://www.baidu.com/" target="_self">百度</a>
<a href="https://www.baidu.com/" target="_self">百度</a>
<div class="dg1">第一<a href="https://www.baidu.com/" target="_self">个</a>div
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
</div>
<div class="dg2">第二<a href="https://www.baidu.com/" target="_self">个</a>div</div>
<span class="s1">第一个span</span>
<div class="dg3">第三<a href="https://www.baidu.com/" target="_self">个</a>div</div>
<div class="d1 ">第一个d1</div>
<span class="s2">第二个span</span>
<div class="d2 ">第二个d2</div>
<span class="s3">第三个span</span>
<div class="d3 ">第三个d3</div>
<span class="s4">第四个span</span>
</body>
</html>

